<!--进程节点配置-->
<div class = "cnb">
    <div class="consume-panel">

        <el-button  @click="addCnb" type="primary">添加</el-button>
        <el-button  @click="processPreview" type="primary" style="float: right">进程预览</el-button>
        <el-form    label-width="100%">
            <el-form-item label="">
            </el-form-item>
        </el-form>
        <!--表格数据-->
        <template>
            <kf-table
                    ref="baseTable"
                    :data="tableData"
                    one-screen
                    :close-on-click-modal="false"
                    border
                    :title="tl"
                    width="diawidth"
                    top="80px"
                    layout="total, sizes, prev, pager, next, jumper"
            >
                <el-table-column prop="nodeName" label="节点名称" >
                </el-table-column>
                <el-table-column prop="secUnit" label="保障单位">
                </el-table-column>
                <el-table-column prop="nodeSeq" label="节点顺序">
                </el-table-column>
                <el-table-column prop="locatingPlace" label="摆放位置">
                    <template scope="scope">
                      {{scope.row.locatingPlace | format}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="180px">
                    <template scope="scope">
                        <el-button  @click="editCnb(scope)" type="text">修改</el-button>
                        <el-button  @click="delectCnb(scope)" type="text">删除</el-button>
                    </template>
                </el-table-column>



                <!--模态框-添加停机位-->
                <template slot="editForm">
                    <el-form :inline="true" :model="addCnbData" ref="addCnbData" class=" regular-form demo-form-inline" :rules="rules">
                        <el-row>
                            <el-col :span="12" style="padding-left: 20px">
                                <el-form-item label="节点名称"  prop="nodeName">
                                    <el-input v-model="addCnbData.nodeName" ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" >
                                <el-form-item label="保障单位"  prop="secUnit">
                                    <el-input v-model="addCnbData.secUnit" ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12" style="padding-left: 20px">
                                <el-form-item label="节点顺序" prop="nodeSeq">
                                    <el-input v-model.number="addCnbData.nodeSeq">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="摆放位置"  prop="locatingPlace">
                                    <el-select v-model="addCnbData.locatingPlace" placeholder="请选择" >
                                        <el-option
                                                v-for="item in locatingTy"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
                <template slot="formBtn">
                    <el-button  @click="clear()">取 消</el-button>
                    <el-button type="primary" @click="saveClick()">确定保存</el-button>
                </template>
            </kf-table>
        </template>
        <el-dialog
                title="进程预览"
                :visible.sync="ppDialogVisible"
                :close-on-click-modal="false"
                width="90%"
        >

            <div style="white-space: nowrap;overflow-x: auto;padding-top: 20px;position: relative;z-index: 22;width: 100%">

                <div style="position: relative;top: 133px;z-index: -1">
                    <div style="height: 0px; width:100%; border-top:1px solid #ff1f28;"></div>
                </div>
                <div class = "sty"  v-for="item in nodeData" style="vertical-align: top;">

                    <div v-if="item.top">
                        <div>
                            {{time1}}
                        </div>
                        <div class="butn">
                            {{item.top.nodeName}}
                        </div>
                        <div class ="line-sty">
                        </div>
                        <div>地服</div>
                        <div  class ="line-sty">
                        </div>
                    </div>
                    <div v-else style="height: 118px"></div>
                    <div class="dot1"></div>
                    <div v-if="item.bottom" >
                        <div  class ="line-sty">
                        </div>
                        <div>地服</div>
                        <div class ="line-sty">
                        </div>
                        <div class="butn">
                            {{item.bottom.nodeName}}
                        </div>
                        <div>
                            {{time1}}
                        </div>
                    </div>
                    <div v-else style="height: 81px"></div>
                </div>

            </div>

            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="ppDialogVisible = false">确 定</el-button>
  </span>

        </el-dialog>

    </div>


</div>